<template>
  <div class="journal-part-5">
    <div class="no-scrollbar scroll-x">
      <div class="table table-1">
        <div class="table-header">
          <div class="cell flex-1">Task Codes</div>
        </div>
        <div class="table-body">
          <div
            class="row-outer"
            v-for="(itemArr, index) in paramsData"
            :key="index"
          >
            <div class="row" v-for="(item, index) in itemArr" :key="item.title">
              <div class="cell">{{ item.title }}</div>
              <div class="cell">{{ item.content }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="part-title">Part VII - {{ $t("btnText.task.part_7") }}</div>
    <div class="no-scrollbar scroll-x">
      <div class="table table-3">
        <div class="table-header">
          <div class="row flex-1">
            <div class="cell">ATA CHAPTERS</div>
            <div class="cell">SGH</div>
            <div class="cell">R/I</div>
            <div class="cell">TS</div>
            <div class="cell">FOT</div>
            <div class="cell">ISP</div>
            <div class="cell">MP</div>
          </div>
        </div>
        <div class="table-body">
          <div class="row" v-for="item in sevenData" :key="item.id">
            <div class="cell">{{ item.ata }}</div>
            <div class="cell">{{ item.sgh }}</div>
            <div class="cell">{{ item.ri }}</div>
            <div class="cell">{{ item.ts }}</div>
            <div class="cell">{{ item.fot }}</div>
            <div class="cell">{{ item.isp }}</div>
            <div class="cell">{{ item.mp }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer-btn">
      <a-button @click="goto('/member/journal', { step: 6 })">上一步</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from "vue";
import { postPartParamsData, postPartSevenData } from "../../../../api/part";
import type { PartParams, PartSevenData } from "../../../../types/part";

const sevenData = ref<PartSevenData[]>();
const getPartSevenData = async () => {
  let res = await postPartSevenData();
  if (res.code === 200) {
    sevenData.value = res.data;
  }
};

const paramsData = ref<PartParams[]>();
const getPartParamsData = async () => {
  let res = await postPartParamsData();
  if (res.code === 200) {
    let arr: any[] = [];
    res.data.map((item, index, rawArr) => {
      if (index % 2 == 0) {
        arr.push([rawArr[index], rawArr[index + 1]]);
      }
      return arr;
    });
    paramsData.value = arr;
  }
};

onBeforeMount(() => {
  getPartSevenData();
  getPartParamsData();
});
</script>
<style scoped lang="less">
@import url("./common.less");
.part-title {
  margin-top: 24px;
}
@media screen and (max-width: 768px) {
  .part-title {
    margin-top: 82px;
  }
}
</style>
